<template>
  <canvas v-if="canvasId" :id="canvasId" :canvasId="canvasId" :style="chartStyle" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error"></canvas>
</template>

<script>
import uCharts from './u-charts.js';
var canvases = {};

export default {
  props: {
    customStyle: {
      type: Object,
      default () {
        return {}
      }
    },
    chartType: {
      required: true,
      type: String,
      default: 'column'
    },
    opts: {
      required: true,
      type: Object,
      default () {
        return null;
      },
    },
    canvasId: {
      type: String,
      default: 'u-canvas',
    },
    cWidth: {
      default: 375,
    },
    cHeight: {
      default: 250,
    },
    pixelRatio: {
      type: Number,
      default: function () {
        return 1;
        // try{
        //   let sysTemInfo = uni.getSystemInfoSync();
        //   console.log(sysTemInfo);
        //   if (sysTemInfo) {
        //     return sysTemInfo.pixelRatio;
        //   }
        // } catch(e) {
        //   //TODO handle the exception
        //   return 1;
        // }
        
      },
    },
  },
  mounted() {
    this.init();
  },
  computed: {
    // 计算属性的 getter
    chartStyle: function () {
      // `this` 指向 vm 实例r
      return Object.assign({
        'width': this.cWidth * this.pixelRatio + 'px',
        'height': this.cHeight * this.pixelRatio + 'px',
        'transform': 'scale(' + (1 / this.pixelRatio) + ')',
        'margin-left': -this.cWidth * (this.pixelRatio - 1) / 2 + 'px',
        'margin-top': -this.cHeight * (this.pixelRatio - 1) / 2 + 'px',
      }, this.customStyle)
    }
  },
  methods: {
    init() {
      switch (this.chartType) {
      case 'column':
        this.initColumnChart();
        break;
      case 'line':
        this.initLineChart();
        break;
      case 'pie':
        this.initPieChart();
        break;
      case 'ring':
        this.initRingChart();
        break;
      default:
        break;
      }
    },
    initColumnChart() {
      canvases[this.canvasId] = new uCharts({
        $this: this,
        canvasId: this.canvasId,
        type: 'column',
        legend: this.opts.legend || true,
        fontSize: 11,
        background: '#FFFFFF',
        pixelRatio: this.pixelRatio,
        animation: true,
        categories: this.opts.categories,
        series: this.opts.series,
        enableScroll: true,
        xAxis: this.opts.xAxis || {
          disableGrid: true,
          itemCount: 4,
          scrollShow: true
        },
        yAxis: this.opts.yAxis || {
          //disabled:true
        },
        padding:this.opts.padding || [15,15,4,15],
        dataLabel: true,
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,
        extra: {
          column: {
            type: 'group',
            width: 30
          }
        }
      });
    },
    initLineChart() {
      canvases[this.canvasId] = new uCharts({
        $this: this,
        canvasId: this.canvasId,
        type: 'line',
        fontSize: 11,
        legend: true,
        dataLabel: false,
        dataPointShape: true,
        background: '#FFFFFF',
        pixelRatio: this.pixelRatio,
        categories: this.opts.categories,
        series: this.opts.series,
        animation: true,
        enableScroll: false,
        xAxis: {
          type: 'grid',
          gridColor: '#CCCCCC',
          gridType: 'dash',
          dashLength: 8,
          itemCount: 4,
          scrollShow: false
        },
        yAxis: {
          gridType: 'dash',
          gridColor: '#CCCCCC',
          dashLength: 8,
          splitNumber: 5,
          min: 10,
          max: 180,
          // format: (val) => {
          // 	return val.toFixed(0) + '元'
          // }
        },
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,
        extra: {
          line: {
            type: 'straight'
          }
        }
      });
    },
    initPieChart() {
      canvases[this.canvasId] = new uCharts({
        $this: this,
        canvasId: this.canvasId,
        type: 'pie',
        fontSize: 11,
        legend: {
          show:true,
          position:'right',
          float:'center',
          itemGap:10,
          padding:5,
          lineHeight:26,
          margin:5,
          borderWidth :1
        },
        position:'right',
        background: '#FFFFFF',
        pixelRatio: this.pixelRatio,
        series: this.opts.series,
        animation: true,
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,
        extra: {
          pie: {
            labelWidth: 15
          }
        }
      });
    },
    initRingChart() {
      canvases[this.canvasId] = new uCharts({
        $this: this,
        canvasId: this.canvasId,
        type: 'ring',
        fontSize: 11,
        legend: this.opts.legend || {
          show:true,
          position:'right',
          float:'center',
          itemGap:10,
          padding:5,
          lineHeight:26,
          margin:5,
          borderWidth :1,
        },
        title: this.opts.title || {
          name: '',
          color: '#7cb5ec',
          fontSize: 25,
          offsetY:-20,
        },
        subtitle: this.opts.subtitle || {
          name: '',
          color: '#666666',
          fontSize: 15,
          offsetY:30,
        },
        extra: {
          pie: {
            offsetAngle: -45,
            ringWidth:this.opts.ringWidth || 40,
            labelWidth:15
          }
        },
        background: this.opts.background || '#FFFFFF',
        pixelRatio: this.pixelRatio,
        series: this.opts.series,
        animation: true,
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,
        disablePieStroke: true,
        dataLabel: false,   //TODO 隐藏百分比
        // dataLabel: this.opts.dataLabel
      });
    },
    // 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
    changeData(cid,newdata) {
      canvases[cid].updateData({
        series: newdata.series,
        categories: newdata.categories
      });
    },
    touchStart(e) {
      let getCurrentIndex = canvases[this.canvasId].getCurrentDataIndex(e);
      this.$emit('getDataIndex',getCurrentIndex);
      canvases[this.canvasId].showToolTip(e, {
        format: function(item, category) {
          return category ? category : '' + ' ' + item.name + ':' + item.data
        }
      });
      canvases[this.canvasId].touchLegend(e, {
        animation : false
      });
      canvases[this.canvasId].scrollStart(e);
    },
    touchMove(e) {
      canvases[this.canvasId].scroll(e);
    },
    touchEnd(e) {
      canvases[this.canvasId].scrollEnd(e);
    },
    error(e) {
      console.log(e)
    },
  },
};
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
		flex: 1;
		background-color: #FFFFFF;
	}
</style>
